<template>
  <div class="list">
    <div :class="cos" v-for="item in pro" :key="item.proid" @click="go(item.proid)">
      <div class="img">
          <img :src="item.img1">
          <!-- item.img1 -->
      </div>
      <div class="text">
          <!-- item.proname item.originprice -->
        <div class="title">{{ item.proname }}</div>
        <div class="price">￥{{ item.originprice }}</div>
      </div>
    </div>
    <!-- <div class="switch" @click="switchSate"><span class="iconfont icon-fenlei" size='60'></span></div> -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      flag: false
    }
  },
  props: {
    pro: Array,
    cos: String,
    isLoading: Boolean,
    go: Function
  },
  methods: {
    goDetail (pid) {
      this.$router.push({ name: 'detail', params: { proid: pid } })
    }
  }
}
</script>

<style lang="stylus">
.list
  width 100%
  box-sizing border-box
  padding 0 10px
  margin 0 auto
  display flex
  flex-direction row
  flex-wrap wrap
  background-color #eeeeee
  justify-content space-between
  padding-top 4px
  .cos_1
    width 100%
    height 5rem
    display flex
    margin 4px 0
    background-color white
    border-radius 0 5px 5px 0
    .img
      height 5rem
      width 5rem
      background-color white
      text-align center
      img
        height 94%
    .text
      flex 1
      padding .5rem .25rem
      .title
        height 1.75rem
        font-size .6rem
        overflow hidden
        display: -webkit-box
        -webkit-line-clamp: 2
        -webkit-box-orient: vertical
        text-overflow ellipsis
      .price
        color red
        font-size 13px
        line-height 20px
  .cos_2
    width 48%
    height 260px
    margin 5px 0
    border-radius 0 0 5px 5px
    background-color white
    .img
      height 170px
      width 100%
      background-color white
      text-align center
      img
        height 100%
    .text
      flex 1
      padding 10px 5px
      .title
        width 100%
        font-size 13px
        height 34px
        overflow hidden
        display: -webkit-box
        -webkit-line-clamp: 2
        -webkit-box-orient: vertical
        text-overflow ellipsis
      .price
        color red
        font-size 13px
        line-height 20px
// .switch
//   width 40px
//   height 40px
//   bottom 60px
//   right 50px
//   position sticky
//   border-radius 50%
//   background-color #ccc
//   display flex
//   justify-content center
//   align-items center
//   span
//     width 30px
//     height 30px
//     font-size 25px
//     color white
</style>
